﻿<!doctype html>
<html>
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="">
     <meta name="Description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.common.min.css" />
     <link rel="stylesheet" type="text/css" href="css/base.css" />
     <title></title>
 </head>
 <body class="container bgcl-lightGray">

    <header class="row header usrpage-header" id="header">
        <a class="pull-left header-btn" href="index.html"><span class="icon2 icon2-back"><span class="sr-only">返回</span></span></a>
        <h1>体验馆地图</h1>
    </header>
         
    <main class="row main map-show">
       <header>
           <h3>天河区旗舰店</h3>
           <h5>天河区珠江新城冼村路2号首府大厦1-4楼</h5>
       </header>
        <section class="tabs-nav map-func">
            <a data-toggle="modal" data-target="#modal_routeBefore" role="button"><span><span class="icon2 icon2-loc"></span>到这里去</span></a>
            <a href="tel:10010"><span><span class="icon2 icon2-phone"></span>联系商家</span></a>
        </section>
        <section id="map_canvas" class="map-canvas" role="application"></section>
        <section class="search-bar">
            <input type="text" placeholder="商铺名/地址" />
            <button class="btn search-submit">搜</button>
        </section>
        <div class="map-controler" role="group">
            <div id="mapZoomIn" role="button"><span class="icon2 icon2-plus"><span class="sr-only">放大</span></span></div>
            <div id="mapZoomOut" role="button"><span class="icon2 icon2-decrease"><span class="sr-only">缩小</span></span></div>
        </div>
        <div class="routeGuide-drive-toggler hide" data-toggle="modal" data-target="#modal_routeGuide_drive" role="button">详细路线</div>
        <div class="routeGuide-toggler hide" data-toggle="modal" data-target="#modal_routeGuide" role="button">详细路线</div>
        <!-- 出行方式modal: -->
        <div class="modal modal-routeBefore" id="modal_routeBefore" tabindex="-1" role="dialog" aria-labelledby="modalLabel_rount" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id="map_driveToThere">自驾车</div>
                    <div id="map_publicToThere">公共交通</div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- 详细指引modal: -->
        <div class="modal modal-routeGuide" id="modal_routeGuide" tabindex="-1" role="dialog" aria-labelledby="modalLabel_rount" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h5 class="modal-title" id="modalLabel_rount">路线方案</h5>
                    </div>
                    <div class="modal-body" id="router_show">

                    </div>
                    
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- 自驾详细指引modal: -->
        <div class="modal modal-routeGuide-drive" id="modal_routeGuide_drive" tabindex="-1" role="dialog" aria-labelledby="modalLabel_rount" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h5 class="modal-title" id="modalLabel_rount">路线方案</h5>
                    </div>
                    <div class="modal-body" id="router_show_drive">

                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
    </main>

     <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
     <script src="lib/js/zepto.min.js"></script>
     <script src="js/sosomapscript.js"></script>
     <script src="js/modalscript.js"></script>
</body>
</html>
